<template>
	<view class="add_param_wrap">
		<uv-form labelPosition="left" :model="formData" :rules="addFormRules" ref="form">
			<!-- 表单项 -->
			<view class="form_content_box">
				<!-- 参数 -->
				<uv-form-item label="参数:"  prop="formData.paramName" @click="showParamNameSelect">
					<uv-input :disabled="true" v-model="formData.paramName" disabled disabledColor="#ffffff" placeholder="请选择参数" border="none"></uv-input>
					<template v-slot:right>
						<uv-icon name="arrow-right"></uv-icon>
					</template>
				</uv-form-item>

				<!-- 起始位 -->
				<uv-form-item label="起始位:" prop="formData.startBit" style="padding-right: 16px">
					<uv-input type="number" v-model="formData.startBit" placeholder="请输入起始位" border="none" />
				</uv-form-item>

				<!-- 数据类型 -->
				<uv-form-item label="数据类型:" prop="formData.dataType" @click="showDataTypeSelect">
					<uv-input v-model="formData.dataType" disabled disabledColor="#ffffff" placeholder="请选择数据类型" border="none"></uv-input>
					<template v-slot:right>
						<uv-icon name="arrow-right"></uv-icon>
					</template>
				</uv-form-item>

				<!-- 操作位 -->
				<uv-form-item label="操作位:" prop="formData.functionDigit" @click="showFunctionDigitSelect">
					<uv-input v-model="formData.functionDigit" disabled disabledColor="#ffffff" placeholder="请选择操作位" border="none"></uv-input>
					<template v-slot:right>
						<uv-icon name="arrow-right"></uv-icon>
					</template>
				</uv-form-item>

				<!-- 字节序 -->
				<uv-form-item label="字节序:" prop="formData.byteOrder" @click="showByteOrderSelect">
					<uv-input v-model="formData.byteOrder" disabled disabledColor="#ffffff" placeholder="请选择字节序" border="none"></uv-input>
					<template v-slot:right>
						<uv-icon name="arrow-right"></uv-icon>
					</template>
				</uv-form-item>

				<!-- 保留位数 -->
				<uv-form-item label="保留位数:" prop="formData.reservedBits" style="padding-right: 16px">
					<uv-input type="number" v-model="formData.reservedBits" placeholder="请输入保留位数" border="none" />
				</uv-form-item>

				<!-- 备注 -->
				<uv-form-item label="备注:" prop="formData.desc" style="padding-right: 16px">
					<uv-input v-model="formData.desc" placeholder="请输入备注" border="none" />
				</uv-form-item>
			</view>
			<view class="action_box">
				<uv-button class="action_btn_item" type="primary" @click="confirmClick">
					<view class="btn_content">
						<uv-icon name="checkmark" color="#ffffff" size="24"></uv-icon>
						<text>确定</text>
					</view>
				</uv-button>
				<uv-button class="action_btn_item" type="error" @click="deleteClick">
					<view class="btn_content">
						<uv-icon name="trash" color="#ffffff" size="24"></uv-icon>
						<text>删除</text>
					</view>
				</uv-button>
			</view>
		</uv-form>

		<!-- 参数名称选择器 -->
		<uv-picker ref="paramNameSelectRef" :columns="paramNameOptions" @confirm="paramNameSelect"></uv-picker>

		<!-- 数据类型选择器 -->
		<uv-picker ref="dataTypeSelectRef" :columns="dataTypeOptions" @confirm="dataTypeSelect"></uv-picker>

		<!-- 操作位选择器 -->
		<uv-picker ref="functionDigitSelectRef" :columns="functionDigitOptions" @confirm="functionDigitSelect"></uv-picker>

		<!-- 字节序选择器 -->
		<uv-picker ref="byteOrderSelectRef" :columns="byteOrderOptions" @confirm="byteOrderSelect"></uv-picker>
	</view>
</template>

<script>
import jsonData from '@/data/transferConfig/data.json'
import { useTransferConfigStore } from '../../stores/transferConfig.js'


export default {
	name: 'EditParam',
	data() {
		return {
			// 表单数据
			formData: {
				// 参数名称
				paramName: '',
				// 起始位
				startBit: '',
				// 数据类型
				dataType: '',
				// 操作位
				functionDigit: '',
				// 字节序
				byteOrder: '',
				// 保留位数
				reservedBits: '',
				// 备注
				desc: ''
			},
			// 参数名称选择数据
			paramNameOptions: [],
			// 数据类型选择数据
			dataTypeOptions: [],
			// 操作位选择数据
			functionDigitOptions: [],
			// 字节序选择数据
			byteOrderOptions: [],
			// 表单 rules
			addFormRules: []
		}
	},
	methods: {
		// 显示参数名称选择器方法
		showParamNameSelect() {
			this.$refs.paramNameSelectRef.open()
			this.hideKeyboard()
		},
		// 显示数据类型选择器方法
		showDataTypeSelect() {
			this.$refs.dataTypeSelectRef.open()
			this.hideKeyboard()
		},
		// 显示操作位选择器方法
		showFunctionDigitSelect() {
			this.$refs.functionDigitSelectRef.open()
			this.hideKeyboard()
		},
		// 显示字节序选择器方法
		showByteOrderSelect() {
			this.$refs.byteOrderSelectRef.open()
			this.hideKeyboard()
		},

		// 参数名称选择器选择方法
		paramNameSelect(e) {
			console.log(e)
			this.formData.paramName = e.value[0]
		},

		// 数据类型选择器选择方法
		dataTypeSelect(e) {
			console.log(e)
			this.formData.dataType = e.value[0]
		},

		// 操作位选择器选择方法
		functionDigitSelect(e) {
			console.log(e)
			this.formData.functionDigit = e.value[0]
		},

		// 字节序选择器选择方法
		byteOrderSelect(e) {
			console.log(e)
			this.formData.byteOrder = e.value[0]
		},

		// 确定点击事件
		confirmClick() {
			const transferConfigStore = useTransferConfigStore()
			// 将当前修改的参数数据重新给到 pinia 的参数列表当中
			transferConfigStore.currentParamList.forEach((item) => {
				if (item.paramName == transferConfigStore.currentEditParamInfo.paramName) {
					item = transferConfigStore.currentEditParamInfo
				}
			})

			// 返回上一页
			uni.navigateBack()
		},

		// 删除点击事件
		deleteClick() {
			uni.navigateBack()
		},

		hideKeyboard() {
			uni.hideKeyboard()
		}
	},
	created() {
		const transferConfigStore = useTransferConfigStore()
		this.paramNameOptions = [jsonData.paramNameOptions]
		this.dataTypeOptions = [jsonData.dataTypeOptions]
		this.functionDigitOptions = [jsonData.functionDigitOptions]
		this.byteOrderOptions = [jsonData.byteOrderOptions]
		console.log('目前要修改的参数信息：', transferConfigStore.currentEditParamInfo)
		// 将 pinia 内存储的当前要修改的参数信息给到 this
		this.formData = transferConfigStore.currentEditParamInfo
	}
}
</script>

<style lang="scss" scoped>
.add_param_wrap {
	width: 100vw;
	height: calc(100vh - 44px);
	box-sizing: border-box;
	background: #f3f3f3;
	// border: 1px solid red;

	.action_box {
		padding: 20px 20px;
		display: flex;
		flex-direction: column;

		.action_btn_item {
			margin-bottom: 20px;

			.btn_content {
				display: flex;
				flex-direction: row;
				padding: 10px 0px;

				text {
					font-size: 16px;
					margin-left: 8px;
				}
			}
		}
	}
}

:deep(.uv-form-item) {
	background-color: #ffffff !important;
	padding: 0px 0px 0px 18px;
	border-bottom: 0.5px solid #ececec;

	.uv-form-item__body {
		padding: 14px 0px;
		.uv-form-item__body__left {
			width: 80px;

			.uv-form-item__body__left__content {
				width: 80px;
				.uv-form-item__body__left__content__label {
					width: 80px;
					span {
						display: inline-block;
						width: 100%;
					}
				}
			}
		}
	}
}

:deep(.uni-input-wrapper) {
	text-align: right;
}

:deep(.uni-input-input) {
	padding-right: 60px;
}

:deep(.item__body__right__content__icon) {
	margin-right: 14px;
}

:deep(.uv-button) {
	height: 50px;
}
</style>
